import React from 'react';
import { nanoid } from 'nanoid';
import PropTypes from 'prop-types';

import './index.css';

export default class TodoList extends React.Component {
  static propTypes = {
    addTodo: PropTypes.func.isRequired
  };

  search = e => {
    if (e.keyCode !== 13) return;
    if (e.target.value.replace(/ /g, '') === '') return alert('请输入任务名称');
    const todo = { id: nanoid(), name: e.target.value, done: false };
    this.props.addTodo(todo);
    e.target.value = '';
  };
  render() {
    
    return (
      <div className="hearder-box">
        <input type="text" className="search" placeholder="请输入你的任务名称，按回车键确认" onKeyUp={this.search} />
      </div>
    );
  }
}
